import React from 'react';
import ImageLazy from '../commons/ImageLazy';
import NavLink from '../commons/NavLink';
import Swiper from 'swiper';

let recommond_swiper
var Recommond = React.createClass({
  componentDidMount:function(){
    $('.recommond_swiper').each(function(){
        recommond_swiper = new Swiper(this,{
        paginationClickable: true,
        slidesPerView: 'auto',
        calculateHeight:true,
      });
    })

  },
  componentDidUpdate:function(){
    // recommond_swiper.reInit();
  },
  render:function(){
    return(
    <div className="transform_them_a">
      <div className="item_wrapper border_b1">
        <div className="item">
          <div className="recommond_swiper swiper-container common_swiper">
              <div className="swiper-wrapper">
                  <a href="javascript:void(0)" className="swiper-slide">
                    <em>321</em>
                    <ImageLazy src="http://dummyimage.com/572x360/fabfb1/98068b&text='content%20Swiper'" style={{height:'3.6rem'}} />
                    <div className="txt">
                      <span className="left">
                        <var>阿斯达岁的</var>
                        <small>阿斯大三大四的</small>
                      </span>
                    </div>
                  </a>
                  <a href="javascript:void(0)" className="swiper-slide">
                    <em>321</em>
                    <ImageLazy src="http://dummyimage.com/572x360/fabfb1/98068b&text='content%20Swiper'" style={{height:'3.6rem'}} />
                    <div className="txt">
                      <span className="left">
                        <var>阿斯达岁的</var>
                        <small>阿斯大三大四的</small>
                      </span>
                    </div>
                  </a>
                  <a href="javascript:void(0)" className="swiper-slide">
                    <em>321</em>
                    <ImageLazy src="http://dummyimage.com/572x360/fabfb1/98068b&text='content%20Swiper'" style={{height:'3.6rem'}} />
                    <div className="txt">
                      <span className="left">
                        <var>阿斯达岁的</var>
                        <small>阿斯大三大四的</small>
                      </span>
                    </div>
                  </a>
              </div>
            </div>
            <div className="txt_list">
              <NavLink to="/art/detial/1" className="list border_t1 common_list">
                <div className="left"><ImageLazy src="http://dummyimage.com/200x200/fabfb1/98068b" style={{height:'2rem'}} /></div>
                <div className="right">
                  <div className="top clearfix">
                    <var><em></em>西瓜居士1 </var><div className="last_time">5小时前</div>
                  </div>
                  <h4>关于玻尿酸那些事万一这里有两行呢关于玻尿酸那些事万一这里有两行呢</h4>
                  <div className="bot">
                    <var>能量抗衰</var>
                    {/* <em>◆阅读2389</em><em>◆评论238</em><em>◆收藏238</em> */}
                  </div>
                </div>
              </NavLink>
              <NavLink to="/art/detial/2" className="list border_t1 common_list">
                <div className="left"><ImageLazy src="http://dummyimage.com/200x200/fabfb1/98068b" style={{height:'2rem'}} /></div>
                <div className="right">
                  <div className="top clearfix">
                    <var><em></em>西瓜居士</var><div className="last_time">5小时前</div>
                  </div>
                  <h4>关于玻尿酸那些事万一这里有两行呢关于玻尿酸那些事万一这里有两行呢</h4>
                  <div className="bot">
                    <var>能量抗衰</var>
                    {/* <em>◆阅读2389</em><em>◆评论238</em><em>◆收藏238</em> */}
                  </div>
                </div>
              </NavLink>
              <NavLink to="/art/detial/3" className="list border_t1 common_list">
                <div className="left"><ImageLazy src="http://dummyimage.com/200x200/fabfb1/98068b" style={{height:'2rem'}} /></div>
                <div className="right">
                  <div className="top clearfix">
                    <var><em></em>西瓜居士</var><div className="last_time">5小时前</div>
                  </div>
                  <h4>关于玻尿酸那些事万一这里有两行呢关于玻尿酸那些事万一这里有两行呢</h4>
                  <div className="bot">
                    <var>能量抗衰</var>
                    {/* <em>◆阅读2389</em><em>◆评论238</em><em>◆收藏238</em> */}
                  </div>
                </div>
              </NavLink>
            </div>
          </div>
        </div>
    </div>

    )
  }
})

export default Recommond;
